<template>
  <div class="down">
    <div class="down_text">
      <div>
        <img src="../../public/img/other/icon.png" alt="" />
      </div>
      <div class="yuying">声贝语音</div>
      <!-- <img src="../../public/img/down/logo.png" alt="" /> -->
      <p>寻找好声音&nbsp;结交真朋友</p>
      <img @click="downClick" src="../../public/img/down/joinroom.png" alt="" />
      <div class="down_beian">
        <span>Copyright©2020-2021xunyin.All rights reserved.| </span>
        <a href="https://beian.miit.gov.cn/">鲁ICP备2021021117号-1 </a>
        <span>网络文化经营许可证编号：鲁网文（2021） 2573-044号</span>
      </div>
    </div>
    <div class="down_other" v-show="downShow" @click="down_otherClick">
      <img src="../../public/img/down/dian.png" class="down_other_dian" />
      <img src="../../public/img/down/tips1.png" class="down_other_shou" />
      <p>请在浏览器中打开下载</p>
    </div>
    <img class="bg_png" src="../../public/img/down/bg.png" alt="" />
  </div>
</template>

<script>
import md5 from "js-md5";
import qs from "qs";
import { Toast } from "vant";
export default {
  data() {
    return {
      downShow: false,
      downimg: true,
      perfectNumber: "",
      headPic: "",
      nickname: "",
    };
  },
  created() {
    if (window.isAndroid) {
      this.downimg = true;
    } else {
      this.downimg = false;
    }
  },
  methods: {
    down_otherClick() {
      this.downShow = false;
    },
    downClick() {
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      var ua = window.navigator.userAgent.toLowerCase();
      let isvx = ua.match(/MicroMessenger/i) == "micromessenger";
      if (isvx) {
        this.downShow = true;
      } else {
        if (isiOS) {
          window.location.href = "https://apps.apple.com/cn/app/id1535743948";
        } else {
          window.location.href =
            "https://img.xunyinjiaoyou.com/static/app/xunyin2.apk";
        }
      }
    },
  },
};
</script>
<style scoped>
.down {
  width: 100vw;
  height: 100vh;
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.down_text {
  width: 100vw;
  /* height: 100vh; */
  position: relative;
  background: url("../../public/img/down/bg.png") repeat-y;
  background-size: 100%;
  text-align: center;
}
.down_text > div > img {
  width: 33.3vw;
  height: 33.3vw;
  border-radius: 2.1vw;
  margin-top: 21.3vw;
  vertical-align: top;
}
.down_text > .yuying {
  margin-top: 8vw;
  font-size: 5.4vw;
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 2px;
}
.down_text > p {
  margin-top: 2.7vw;
  font-size: 4.3vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 5.9vw;
  letter-spacing: 2vw;
}
.down_text > img:nth-of-type(1) {
  width: 69.6vw;
  margin-top: 34.9vw;
  /* margin-bottom: 34.9vw; */
}
.down_other {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}
.down_other_dian {
  position: absolute;
  right: 3vw;
  top: 3vw;
}
.down_other_shou {
  position: absolute;
  right: 6vw;
  top: 13vw;
}
.down_other > p {
  position: absolute;
  top: 38vw;
  right: 10vw;
  color: white;
}
.down_beian {
  width: 88vw;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 10px;
  color: rgb(231, 226, 226);
  position: fixed;
  left: 6vw;
  bottom: 10px;
}
.down_beian a {
  padding-left: 4px;
  text-decoration: none;
  color: rgb(231, 226, 226);
}

@media screen and (min-width: 880px) {
  .down_text{height: auto;}
  .down_text > div > img {
    width: 12vw;
    height: 12vw;
    border-radius: 2.1vw;
    margin-top: 2vw;
    vertical-align: top;
  }
  .down_text>.yuying{
    font-size: 3.4vw;
    margin-top: 4vw;

  }
  .down_text > img:nth-of-type(1) {
    width: 30vw;
    /* height: 3.8vw; */
    vertical-align: top;
    margin-top: 3.3vw;
  }
  .down_text > img:nth-of-type(2) {
    width: 25vw;
    margin-top: 2vw;
  }
  .down_text > p {
    margin-top: 1.7vw;
    font-size: 2.3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 5.9vw;
    letter-spacing: 2vw;
  }
}

.bg_png {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
</style>